<template>
  <div class="sidelip-box">
    <div class="container">
      <div class="chart-preview">
        <div style="clear: both;"></div>
        <div class="view-canvas">
          <div id="container" v-bind:style="{width: '700px',height: '250px',margin: '0 auto'}"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import {superviseInfoAPI} from "@api/superviseInfo";

export default {
  name: 'bpmn-image',
  data() {
    return {
      containerEl: null,
      bpmnModeler: null,
      bpmnJson: {}
    };
  },
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    },
    id: {
      type: String,
      default: ''
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      superviseInfoAPI.getFlowImage({id: this.id}).then(res => {
        this.bpmnJson = res.data;
        this.previewTemp();
      })
    },
    previewTemp() {
      let that = this;
      that.containerEl = document.getElementById('container');
      // 避免缓存，每次清一下
      that.bpmnModeler && that.bpmnModeler.destroy();
      that.bpmnModeler = new BpmnModeler({
        container: this.containerEl,
        additionalModules: [{
          paletteProvider: ["value", ''], //禁用/清空左侧工具栏
          labelEditingProvider: ["value", ''], //禁用节点编辑
          contextPadProvider: ["value", ''], //禁用图形菜单
          bendpoints: ["value", {}], //禁用连线拖动
          zoomScroll: ["value", ''], //禁用滚动
          //moveCanvas: ['value', ''], //禁用拖动整个流程图
          move: ['value', ''] //禁用单个图形拖动
        }],
      });
      const viewer = that.bpmnModeler;
      that.bpmnModeler.importXML(that.bpmnJson.procDefValue, (err) => {
        if (err) {
          console.error(err);
        } else {

          // 只实现预览，核心代码以下两句足够
          const canvas = viewer.get('canvas');
          canvas.zoom('fit-viewport');

          /*// 以下代码为：为节点注册鼠标悬浮事件
          const eventBus = that.bpmnModeler.get('eventBus');
          const overlays = that.bpmnModeler.get('overlays');

          //注册鼠标进入
          eventBus.on('element.hover', (e) => {
            //获取节点信息
            let elementInfo = that.getElementInfo(e.element.id);
            if (elementInfo.properties != undefined) {
              overlays.clear();
              const $overlayHtml = that.buildElementInfoHtml(elementInfo);
              //添加悬浮窗
              overlays.add(e.element.id, {
                position: {top: e.element.height - 20, left: -50},
                html: $overlayHtml
              });
            } else {
              setTimeout(function () {
                overlays.clear();
              }, 3000);
            }
          });

          //注册鼠标移出
          eventBus.on('element.out', () => {
            //overlays.clear();
          });*/
          that.buildTaskColor();
        }
      });
    },
    getElementInfo(elementId) {
      let elementInfo = {}
      this.bpmnJson.elements.forEach(v => {
        if (v.id === elementId) {
          elementInfo = v;
        }
      })
      return elementInfo;
    },
    buildElementInfoHtml(elementInfo) {
      let html = `<div class="tipBox">`;
      html += `<div class="title">` + elementInfo.name + `</div>`;
      for (let i = 0; i < elementInfo.properties.length; i++) {
        if (elementInfo.properties[i].name === 'userId') {
          html += "<hr/>"
        }
        html += `<div class="rowDiv" > <span class="rowDivTitle" >` + elementInfo.properties[i].name + `：</span><span class="rowDivContent"  >` + elementInfo.properties[i].value + `</span></div>`
      }
      html += `</div>`;
      return html;
    },
    buildTaskColor() {
      let that = this;
      // 实现步骤：1、找到页面里所有节点
      const nodeList = that.bpmnModeler.get('elementRegistry');
      // 此时得到的nodeList 便是流程图中所有的节点的集合
      // 步骤2 ：为节点添加颜色
      let modeling = that.bpmnModeler.get('modeling');
      nodeList.forEach(v => {
        let elementInfo = that.getElementInfo(v.id)
        let flowsInfo = that.getFlowsInfo(v.id)
        if (elementInfo.id !== undefined) {
          modeling.setColor(v, {
            stroke: elementInfo.current ? '#FFB403' : elementInfo.completed ? '#36C75F' : '#727275 ',
          });
        }
        if (flowsInfo.id !== undefined) {
          modeling.setColor(v, {
            stroke: flowsInfo.completed ? '#36C75F' : '#727275 '
          });
        }
      })
    },
    getFlowsInfo(elementId) {
      let elementInfo = {}
      this.bpmnJson.flows.forEach(v => {
        if (v.id === elementId) {
          elementInfo = v;
        }
      })
      return elementInfo;
    },
  }
};
</script>
<style lang="less">
.container {
  .tipBox {
    width: 200px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    padding: 12px;

    .title {
      width: 100%;
      text-align: center;
      font-weight: bold;
    }

    .rowDiv {
      width: 280px;

      .rowDivTitle {
        width: 20px;
        font-weight: bold;
      }

      .rowDivContent {
        width: 180px;
        display: block;
        overflow-wrap: break-word;
      }
    }

  }
}

.bjs-powered-by {
  display: none;
}
</style>
